import { View, ScrollView, Image } from '@tarojs/components'
import { useState } from "react";
import { useRouter } from '@tarojs/taro';
import './index.less'

const loadingImg = require('../../assert/Paint_Icon_Loading.png')

const CourseDetail = () => {
    const [scrollHeight,] = useState('100vh');
    const [listScrollTop,] = useState(0);
    const [loading, setLoading] = useState(true);

    const router = useRouter()
    // console.log('参数：', router.params)

    return (
        <View className='wrapper'>
            {loading && (
                <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Image src={loadingImg} mode="aspectFill" style={{ width: '20px', height: '20px', animation: 'rotate 1s linear infinite' }} />
                </View>
            )}
            <ScrollView className='scrollview' style={{ height: scrollHeight }} enableFlex enableBackToTop scrollY scrollTop={listScrollTop}>
                <Image className='image' src={router.params.bannerImgUrl as string} mode='widthFix' onLoad={() => setLoading(false)} />
            </ScrollView>
        </View>
    )
}

export default CourseDetail